<template>
    <div>
      <ul class="list" >
          <li class="sub" v-for="(item,key) of cities" :key="key" @click="clickItem">
               {{key}}
          </li>
      </ul>
    </div>
</template>

<script>
export default {
   name:"CityAlphabet" ,
   
   //属性
   props:{
       cities:Object
   },
  methods:{
    clickItem(e){
        //在子组件中需要向父组件传值处使用this.$emit("function",param);   //其中function为父组件定义函数，param为需要传递参数
        this.$emit("change",e.target.innerText)

    }
  }
    
}


</script>

<style lang="stylus" scoped>
 @import '~styles/varibles.styl'
 
.list{
    display flex
    // 对齐方式列
    flex-direction column
    //主轴上的对齐方式
    justify-content center
    position absolute
    top: 1.58rem
    right: 0
    bottom: 0
    width: .4rem
    

      


}
.sub{
    line-height: .4rem
    text-align: center
    color: $bgColor
}
</style>